<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/ol.css" rel="stylesheet" />
		<!--
        	作者：1034023223@qq.com
        	时间：2017-09-21
        	描述：引入openlayers
        -->
		<script src="js/ol-debug.js"></script>
		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			#map {
				width: 100%;
				position: fixed;
				top: 45px;
				z-index: 10;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
			
			#footer {
				width: 100%;
				position: fixed;
				top: 0;
				background: rgba(52, 52, 52, 0.5);
				color: #fff;
				font-size: 12px;
				box-sizing: border-box;
				z-index: 9999;
				top: auto!important;
				bottom: 0;
				height: 48px;
			}
			
			#type {
				width: 30%;
				right: 0;
				position: fixed;
				background: rgba(52, 52, 52, 0.5);
				color: #FFFFFF;
				z-index: 9999;
			}
			
			.icon_style {
				display: flex;
				justify-content: center;
			}
			
			#marker {
				width: 20px;
				height: 20px;
				border: 1px solid #088;
				border-radius: 10px;
				background-color: #0FF;
				opacity: 0.5;
			}
			
			#vienna {
				text-decoration: none;
				color: white;
				font-size: 11pt;
				font-weight: bold;
				text-shadow: black 0.1em 0.1em 0.2em;
			}
			
			.popover-content {
				min-width: 180px;
			}
			
			.icon_style {
				height: 48px;
				align-items: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<span class="mui-icon mui-icon-paperplane mui-pull-left" id="location_btn"></span>

			<h1 class="mui-title">地理信息系统</h1>
			<span id='setting' class=" mui-pull-right mui-btn-linkn mui-icon mui-icon-bars"></span>
		</header>
		<div class="mui-content">
			<form class="mui-input-group mui-hidden" style="z-index: 999;" id="search_form">
				<div class="mui-row">
					<div class="mui-col-sm-10 mui-col-xs-10">
						<input type="text" class="mui-input-clear" placeholder="请输入关键字">
					</div>
					<div class="mui-col-sm-2 mui-col-xs-2">
						<button type="button" class="mui-btn mui-btn-primary" style="width: 100%;">搜索</button>

					</div>
				</div>

			</form>
			<!--<select id="type">
				<option value="Point">Point</option>
				<option value="LineString">LineString</option>
				<option value="Polygon">Polygon</option>
				<option value="Circle">Circle</option>
			</select>-->

			<div id="map"></div>
			<div style="display: none;">
				<!-- Clickable label for Vienna -->

				<div id="marker" title="Marker"></div>
				<!-- Popup -->
				<div id="popup" title="Welcome to OpenLayers"></div>
			</div>
		</div>
		<div id="footer">
			<div class="mui-row" style="height: 48px;">
				<div class="mui-col-sm-4  mui-col-xs-4" style="background:rebeccapurple;">
					<span class="mui-icon  icon_style">首页</span>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4 " style="background:blue;">
					<span class="mui-icon mui-icon  icon_style" id="search_btn">搜索</span>
				</div>
				<div class="mui-col-sm-4 mui-col-xs-4">
					<span class="mui-icon mui-icon  icon_style" style="background: firebrick;">校准</span>
				</div>

			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>

		<script>
			var pos = ol.proj.fromLonLat([108.35, 21.61]);
			var mapView = new ol.View({
				center: pos, // 定义地图显示中心于经度0度，纬度0度处
				projection: 'EPSG:3857',
				zoom: 13, // 缩放级别，数字越大缩放级别越高
				minZoom: 1, //约束缩放范围
				maxZoom: 22,

			});
			var layer1 = new ol.layer.Tile({
				title: "天地图路网",
				source: new ol.source.XYZ({
					url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
				})
			});
			var layer2 = new ol.layer.Tile({
				title: "天地图文字标注",
				source: new ol.source.XYZ({
					url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
				})

			});

			var fcgImage = new ol.layer.Image({
				title: '防城港多边形底图',
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://120.241.64.28:9770/geoserver/cite/wms',
					params: {
						'FORMAT': 'image/png',
						'VERSION': '1.1.1',
						LAYERS: 'cite:polygon_new',
						STYLES: ''
					}
				})
			});
			var fcgImage1 = new ol.layer.Image({
				title: '防城港折现底图',
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://120.241.64.28:9770/geoserver/cite/wms',
					params: {
						'FORMAT': 'image/png',
						'VERSION': '1.1.1',
						LAYERS: 'cite:polyline_new',
						STYLES: ''
					}
				})
			});
			var fcgImage2 = new ol.layer.Image({
				title: '防城港点底图',
				source: new ol.source.ImageWMS({
					ratio: 1,
					url: 'http://120.241.64.28:9770/geoserver/cite/wms',
					params: {
						'FORMAT': 'image/png',
						'VERSION': '1.1.1',
						LAYERS: 'cite:point_new',
						STYLES: ''
					}
				})
			});

			var map = new ol.Map({
				// 设置地图图层
				layers: [
					// 创建一个使用Open Street Map地图源的瓦片图层
					layer1, layer2, fcgImage, fcgImage1, fcgImage2
				],
				// 设置显示地图的视图
				view: mapView,
				// 让id为map的div作为地图的容器
				logo: {
					src: '',
					href: ''
				}, // 点击能跳转到对应页面
				target: 'map',
				controls: ol.control.defaults({
					attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
						collapsible: false
					})
				}),
			});

			var vienna = new ol.Overlay({
				position: pos,
				element: document.getElementById('vienna')
			});
			//  map.addOverlay(vienna);

			// Popup showing the position the user clicked
			var popup = new ol.Overlay({
				element: document.getElementById('popup')
			});
			map.addOverlay(popup);

			map.on('click', function(evt) {
				//地图点击事件
				var element = popup.getElement();
				var coordinate = evt.coordinate;
				var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
				//popup.setPosition(coordinate);
				mui.alert(hdms);

			});

			//	var typeSelect = document.getElementById('type');
			//			var modify = new ol.interaction.Modify({
			//				source: source
			//			});
			//			var draw, snap; // global so we can remove them later
			//			function addInteractions() {
			//				draw = new ol.interaction.Draw({
			//					source: source,
			//					type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
			//				});
			//				map.addInteraction(draw);
			//				snap = new ol.interaction.Snap({
			//					source: source
			//				});
			//				map.addInteraction(snap);
			//
			//			}
			//			/**
			//			 * Handle change event.
			//			 */
			//			typeSelect.onchange = function() {
			//				map.removeInteraction(draw);
			//				map.removeInteraction(snap);
			//				addInteractions();
			//			};
			//			addInteractions();
			//			map.addInteraction(modify);

			(function($, doc) {
				$.init();
				$.plusReady(function() {
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if(backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};

				});
			}(mui, document));

		
			//搜索
			var searchButton = document.getElementById("search_btn");
			searchButton.addEventListener("tap", function(event) {
				var searchForm = document.getElementById("search_form");
				if(searchForm.classList.contains("mui-hidden")) {
					searchForm.classList.remove("mui-hidden");
				} else {
					searchForm.classList.add("mui-hidden");
				}

			});

			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener('plusready', onPlusReady, false);
			// 扩展API加载完毕，现在可以正常调用扩展API
			function onPlusReady() {

     var locationButton=document.getElementById("location_btn");
     locationButton.addEventListener("tap",function(event){
     	
     		//定位
				plus.geolocation.getCurrentPosition(function(p) {						
					//alert('Geolocation\nLatitude:' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' + p.coords.altitude);
					var lat=p.coords.latitude;//维度0-90
					var lon=p.coords.longitude;//经度
				var lat2=lat.toFixed(2);
					var lon2=lon.toFixed(2);
					   	mui.toast('lat:'+lat2+'\nlon:'+lon2);
     	var location = ol.proj.fromLonLat([lon, lat],'EPSG:3857'); 
				mapView.animate({
					center: location,
					duration: 2000,
					zoom: 13
				});
				// Vienna marker
				var marker = new ol.Overlay({
					position: location,
					positioning: 'center-center',
					element: document.getElementById('marker'),
					stopEvent: false
				});
				map.addOverlay(marker);
					
				}, function(e) {
					//alert('Geolocation error: ' + e.message);
					mui.toast('Geolocation error: ' + e.message);
				});
  
     });
  		
			}
		</script>

	</body>

</html>